<template>
  <view class="wrap">
    <js-lang title="login.title" :showBtn="true"></js-lang>
    <view class="logo">
      <image src="/static/jeesite/login.png"></image>
    </view>
    <view class="list">
      <view class="list-call">
        <u-icon class="u-icon" size="40" name="account"></u-icon>
        <input class="u-input" type="text" v-model="username" maxlength="32"
          :placeholder="$t('login.placeholderAccount')" />
        <!-- <u-checkbox v-model="remember" active-color="#69cbff">{{$t('login.autoLogin')}}</u-checkbox> -->
      </view>
      <view class="list-call">
        <u-icon class="u-icon" size="40" name="lock"></u-icon>
        <input class="u-input" type="text" v-model="password" maxlength="32"
          :placeholder="$t('login.placeholderPassword')" :password="!showPassword" />
        <image class="u-icon-right" :src="'/static/jeesite/login/eye_' + (showPassword ? 'open' : 'close') + '.png'"
          @click="showPass()"></image>
      </view>
      <view class="list-call" v-if="isValidCodeLogin">
        <u-icon class="u-icon" size="40" name="coupon"></u-icon>
        <input class="u-input" type="text" v-model="validCode" maxlength="4" placeholder="验证码" />
        <u-image class="img-valid-code" width="300rpx" height="90rpx" :src="imgValidCodeSrc"
          @click="refreshImgValidCode()"></u-image>
      </view>
      <!-- <view class="list-call base-url">
				<u-icon class="u-icon" size="40" name="setting" style="padding-right:15rpx;"></u-icon>
				<js-select v-model="baseUrl" :items="baseUrlList" placeholder="快速切换服务器地址" @confirm="updateBaseUrl"></js-select>
			</view> -->
    </view>
    <view class="button" hover-class="button-hover" @click="submit()"><text>{{$t('login.loginButton')}}</text></view>
    <!-- <view class="footer">
			<navigator url="forget" open-type="navigate">{{$t('login.forget')}}</navigator>
			<text>|</text>
			<navigator url="reg" open-type="navigate">{{$t('login.reg')}}</navigator>
		</view>
		<view class="oauth2">
			<u-icon class="u-icon" size="120" color="#00d969" name="weixin-circle-fill" @click="wxLogin"></u-icon>
			<u-icon class="u-icon" size="120" color="#4fa1e8" name="qq-circle-fill" @click="qqLogin"></u-icon>
		</view> -->
  </view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 */
import base64 from '@/common/base64.js';
export default {
  data () {
    return {
      username: '',
      password: '',
      showPassword: false,
      remember: false,
      isValidCodeLogin: false,
      validCode: '',
      imgValidCodeSrc: null,
      baseUrl: '',
      baseUrlList: [{
        name: 'https://demo.jeesite.com',
        value: 'https://demo.jeesite.com/js'
      }, {
        name: 'http://192.168.0.11:8980',
        value: 'http://192.168.0.11:8980/js'
      }, {
        name: 'http://127.0.0.1:8980',
        value: 'http://127.0.0.1:8980/whdc'
      }]
    };
  },
  /*
   * created () {
   *   let option = this.$route.query;
   *   // 易政网单点登录
   */

  /*
   *   this.$u.toast( `${option}${option.query}打印到底有没有参数穿简历` );
   *   if ( option && option.token ) {
   *     uni.showLoading( {
   *       title: '加载中'
   *     } );
   *     this.checkLogin( option.query.token );
   *   } else {
   *     this.loginwzt();
   *   }
   */
  /*
   * this.$u.api.index({loginCheck: true}).then(res => {
   * 	if (typeof res === 'object' && res.result !== 'login'){
   * 		uni.reLaunch({
   * 			url: '/pages/sys/home/index'
   * 		});
   * 	}
   * });
   */
  // },
  methods: {
    showPass () {
      this.showPassword = !this.showPassword;
    },
    refreshImgValidCode ( e ) {
      if ( this.vuex_token == '' ) {
        this.$u.api.index().then( ( res ) => {
          this.imgValidCodeSrc = `${this.vuex_config.baseUrl}/validCode?__sid=${
            res.sessionid}&t=${new Date().getTime()}`;
        } );
      } else {
        this.imgValidCodeSrc = `${this.vuex_config.baseUrl}/validCode?__sid=${
          this.vuex_token}&t=${new Date().getTime()}`;
      }
      this.validCode = '';
    },
    submit () {
      if ( this.username.length == 0 ) {
        this.$u.toast( '请输入账号' );
        return;
      }
      if ( this.password.length == 0 ) {
        this.$u.toast( '请输入密码' );
        return;
      }
      this.$u.api.login( {
          username: base64.btoa( this.username ),
          password: base64.btoa( this.password ),
          validCode: base64.btoa( this.validCode ),
          param_deviceType: 'mobileApp',
          param_remember: this.remember
        } )
        .then( ( res ) => {
          this.$u.toast( res.message || '未连接服务器' );
          if ( res.result == 'true' ) {
            setTimeout( () => {
              uni.reLaunch( {
                url: '/pages/sys/home/index'
              } );
            }, 500 );
          }
          if ( res.isValidCodeLogin ) {
            this.isValidCodeLogin = true;
            this.refreshImgValidCode();
          }
        } );
    },
    wxLogin ( res ) {
      this.$u.toast( '微信登录' );
    },
    qqLogin () {
      this.$u.toast( 'QQ 登录' );
    },
    updateBaseUrl () {
      this.vuex_config.baseUrl = this.baseUrl;
      this.$u.vuex( 'vuex_config', this.vuex_config );
      this.$u.http.setConfig( {
        baseUrl: this.baseUrl
      } );
      this.$u.toast( '切换成功！' );
    }
    /*
     * 易政网单点登录
     * async checkLogin ( token ) {
     *   if ( token !== '' && token !== null && token != undefined ) {
     *     // 过滤token中的特殊值
     *     token = token.replace( '#/', '' );
     *     const tokenInfo = await this.$u.api.ssoToken( {
     *       token: token
     *     } );
     *     let params = {
     *       username: tokenInfo.username,
     *       token: tokenInfo.token,
     *       url: ''
     *     };
     *     // 拿到token 调用免登接口
     *     const res = await this.$u.api.sso( params );
     */

    /*
     *     this.$u.toast( res.message || '未连接服务器' );
     *     if ( res.result == 'true' ) {
     *       setTimeout( () => {
     *         uni.hideLoading();
     *         uni.reLaunch( {
     *           url: '/pages/sys/home/index?backShow=1'
     *         } );
     *       }, 500 );
     *     }
     *     if ( res.isValidCodeLogin ) {
     *       this.isValidCodeLogin = true;
     *       this.refreshImgValidCode();
     *     }
     *   } else {
     *     uni.reLaunch( {
     *       url: '/pages/sys/home/index'
     *     } );
     *   }
     * },
     * async loginwzt () {
     *   let that = this;
     */


    //   /*
    //    * TODO 跨域问题需要解决
    //    * const info = await this.$u.api.wztGetUser(params);
    //    */

    /*
     *   croods.customPlugin( {
     *     action: 'UserPlugin.login',
     *     params: {},
     *     success: async function ( data ) {
     *       let params = {
     *         appId: 'wzt',
     *         tokenId: data.token,
     *         remoteIp: data.moapIp,
     *         attributeNames: 'loginName,userid'
     *       };
     *       const info = await that.$u.api.wztGetUser( params );
     *       let params2 = {
     *         username: info.username,
     *         token: info.token,
     *         url: ''
     *       };
     *       // 拿到token 调用免登接口
     *       const res = await that.$u.api.sso( params2 );
     */

    /*
     *       if ( res.result == 'true' ) {
     *         setTimeout( () => {
     *           uni.hideLoading();
     *           uni.reLaunch( {
     *             url: '/pages/sys/home/index?backShow=1'
     *           } );
     *         }, 500 );
     *       } else {
     *         setTimeout( () => {
     *           uni.hideLoading();
     *           uni.reLaunch( {
     *             url: '/pages/sys/login/errorIndex'
     *           } );
     *         }, 500 );
     *       }
     *       if ( res.isValidCodeLogin ) {
     *         this.isValidCodeLogin = true;
     *         this.refreshImgValidCode();
     *       }
     *     }
     *   } );
     * }
     */
  }
};
</script>
<style lang="scss">
@import 'index.scss';

.logo {
  width: 260rpx;
  height: 260rpx;
  background: rgba(59, 121, 235, 1);
  box-shadow: 0rpx 5rpx 20rpx 5rpx rgba(45, 127, 235, 0.5);
  border-radius: 50%;
  margin: 70rpx auto 10rpx auto;
}

.logo image {
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
}

.base-url js-select {
  width: 100%;
}

.button {
  margin: 30rpx auto 0;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #46afff;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 35rpx;
  margin-top: 60rpx;
}

.footer text {
  font-size: 30rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.oauth2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 55rpx 100rpx;

  image {
    height: 100rpx;
    width: 100rpx;
  }
}
</style>